<!--
 * @Description: 根组件 App.vue
 * @Author bianpengfei
 * @create 2024/8/26 15:12
 -->

<!--setup-->
<script setup lang="ts">
import { onMounted, getCurrentInstance, type ComponentInternalInstance } from 'vue'
import AppLoading from '@/layout/default/components/AppLoading.vue'
import { setting } from '@shared/base/setup.ts'
import { stringPathJoin } from 'sf-utils2'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const props = defineProps({})
const emit = defineEmits([])

/* 状态 */

const FONT_URL = `${stringPathJoin(window.location.origin, 'cdn/font/DIN_Alternate_Bold_202404291007.ttf')}`

/* 方法 */

/**
 * 初始化字体
 */
function initFont() {
  const fontDinStyleDom = document.head.querySelector('style#font-din')
  if (fontDinStyleDom) return
  const style = document.createElement('style')
  style.id = 'font-din'
  style.innerHTML = `
    @font-face {
      font-family: 'DIN Alternate';
      font-display: swap;
      font-weight: 700;
      src: url("${FONT_URL}");
    }
  `
  document.head.appendChild(style)
}

/**
 * 初始化事件
 */
const initEvents = () => {
  // 阻止右键菜单 如果是图片
  document.addEventListener('contextmenu', (event) => {
    const target = event.target as HTMLElement
    const tagNameMap = {
      IMG: 1,
      PICTURE: 1
    }
    if (tagNameMap[target.tagName]) {
      event.preventDefault()
    }
  })
}

// 初始化
const init = async () => {
  initEvents()
  initFont()
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  init()
})

/* 暴露 */
defineExpose({
  $: proxy!.$
})
</script>

<!--render-->
<template>
  <ElConfigProvider v-bind="setting.configProvider">
    <RouterView />
    <AppLoading />
  </ElConfigProvider>
</template>

<!--style-->
<style lang="less">
.family-din {
  /*  stylelint-disable */
  font-family: 'DIN Alternate' !important;
  font-size: 16px;
  line-height: 21px;
}

div.ijep-message {
  //transition: opacity 0.3s ease-in-out;
}
</style>
